<template>
    <div class="container">
        <div class="header">
            <van-image fit="contain" src="/wxchat/images/gyyj.png" />
            <div class="title">
                <span class="text">
                    订单到期情况统计
                </span>
            </div>
        </div>
        <div class="body">
            <van-collapse v-model="activeNames">
                <van-collapse-item v-for="(i, index) in list" :name="index" :value="i.amount" class="collapse-class" border>
                    <template #title>
                        <SvgIcon :icon-class="i.icon" /> &nbsp; {{ i.title }}
                    </template>
                    <div class="bg">
                    <van-cell-group v-for="item in i.items" style="margin-bottom: 15px;  border-top:solid 2px #6F6F6F;">
                        <van-cell title="订单编号" :value="item.rcvid" is-link :to="{ path: '/detail/'+$route?.params.openid+'/' + item.rcvid }" />
                        <van-cell title="物料编号" :value="item.partid" />
                        <van-cell title="交货日期" :value="item.rcvdate" />
                        <van-cell title="交货地点" :value="item.place" />
                        <van-cell title="订单数量" :value="item.amount" />
                    </van-cell-group>
                </div>
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Image as VanImage, Collapse as VanCollapse, CollapseItem as VanCollapseItem, Cell as VanCell, CellGroup as VanCellGroup, Icon as VanIcon,showNotify } from 'vant';
import { useRoute } from 'vue-router'
import router from '@/router';
import type { store } from '@/types/data'
import { getStoreApi } from '@/api/index'

var route = useRoute()
const list = ref<store[]>([
    //     {
    //     title: '超期未送货订单数量',
    //     icon: 'unlink',
    //     items: [
    //         {
    //             rcvid: '111111',
    //             partid: 'IT9501',
    //             rcvdate: '2023-09-24',
    //             place: '一厂生产部',
    //             amount: '1',
    //         }
    //     ]
    // }, {
    //     title: '今日需送货订单数量',
    //     icon: 'privacy',
    //     items: [
    //         {
    //             rcvid: '222222',
    //             partid: 'IT9502',
    //             rcvdate: '2023-10-24',
    //             place: '一厂生产部',
    //             amount: '2',
    //         }
    //     ]
    // }, {
    //     title: '将要送货订单数量',
    //     icon: 'share',
    //     items: [
    //         {
    //             rcvid: '333333',
    //             partid: 'IT9503',
    //             rcvdate: '2023-11-24',
    //             place: '一厂生产部',
    //             amount: '3',
    //         }
    //     ]
    // }
])

const activeNames = ref(['1'])

// const showdetail = (id: string) => {
//     router.push({
//         path: '/detail/' + id
//     })
// }

onMounted(() => {
    let openid = route?.params.openid
    if (openid) {
        getStoreApi(openid as string).then(({ data }) => {
            console.log(data)
            list.value = data
        }).catch((err)=>{
            showNotify(
            { type: 'warning', message: '网路未连接' }
        );
        })
    }
    else {
        router.replace({
            name: '404'
        })
    }
})
</script>
<style lang="scss" scoped>

.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
.bg {
    background-color: #f7f8fa;
}
</style>